<template>
  <div class="choose-box">  
     
    <div v-for="(item,index) in inlineDescList" :key="index" class="shop-item"> 
      <div class="adrees" @click="chooseThis(index)">
        <div class="shop-item-left">
            <div class="check-box">
                <div class="check-circle" v-if="item.isChecked"></div>
            </div>
        </div>
        <div class="shop-item-right">
            <div class="shop-top-line">
              <div><span>单号:</span>{{item.orderSn}}</div> 
              
            </div>
            <div class="shop-top-line">
              <div><span>下单人:</span>{{item.nickName}}</div>  
              <div><span>金额:</span>￥{{item.orderPrice}}</div>
            </div> 
            <div class="last-line"><span>下单时间:</span>{{item.addTime}}</div> 
        </div>
      </div>
    </div>
    <nodata v-if="!inlineDescList || inlineDescList.length==0" text="没有发现可开票的订单喔~" />
    <div class="height120"></div>
    <div class="btn isbtn" @click="goback()">选好了,返回上一页</div>
  </div>

</template>

<script>

import api from '@/api/api.js' 
import {  Search} from 'vux' 
import nodata from '@/components/nodata'
import { Message } from 'element-ui' 
export default { 
  components: { 
   Search,
   nodata
  },
  data () { 
    return {
      filterObj:{
          pageNum:1,
          pageSize:10,
      }, 
      searchText:'',
      inlineDescList: [ ],
      "company":"",
      "companyAddress":"",
      "mobile":"",
      "bank":"",
      "account":"",
      "postAddress":"",
      "orderList":"1,2",
      "tin":""
    }
  },
  mounted () {
    this.getList();
  },
  filters: {
     
  },
  methods: {
    chooseThis(index1){ 
      const bool = !this.inlineDescList[index1].isChecked;
      this.$set(this.inlineDescList[index1], "isChecked", bool);
      
    },
    getList(){
      // api.invoiceMng.myInvoiceList({ 
      // },res=>{
      //   let inlineDescList = res.result.data; 
      //   let arr =  inlineDescList.map(item=>{
      //     return {
      //       key: item.invoiceId,

      //     }
      //   })
      // })

      api.orderMng.orderList({
        pageNum:this.filterObj.pageNum,
        pageSize:this.filterObj.pageSize,
        invoice: 1,
        type: 5,
      },res=>{ 
        this.inlineDescList = this.filterObj.pageNum==1? res.result.data:this.orderList .concat(res.result.data); 
      }) 
    },
    goback(){

    },
    change(e){
      console.log(e)
    },
    goback(){
      let checkOrder =  [];
      this.inlineDescList.forEach(item => {
        if(item.isChecked){
          checkOrder.push(item);
        } 
      })
      if(checkOrder.length==0){
        return  Message({
            message: "请选择订单！",
            type: 'error',
            duration: 3 * 1000
        }) 
      }
      this.$store.commit("setCheckOrders",checkOrder)
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="less" scoped> 
.height120{
    height: 60px;
}
.shop-top-line{
  display: flex;
  justify-content: space-between;
  padding-bottom: .20rem;
  span{
    color: #999;
    margin-right: .12rem;
  }
}
.last-line span{
  color: #999;
  margin-right: .12rem;
}
.shop-item-right{
  flex: 1;
  padding-right: .24rem;
}
.btn{
    text-align: center;
    line-height: 50px;
    background: #FABE00;
    color: #fff;
    height: 50px;
    font-size: 16px;
    letter-spacing: 4px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}
.adrees{ 
    padding-left: 20px;
    position: relative;
    font-size: .24rem;
    line-height: .24rem;
    padding-top: .20rem;
    padding-bottom: .20rem;
    color: #666;
    display: flex;
    &::before{
        content: '';
        position: absolute;
        right: 0;
        left: 20px;
        bottom: 0;
        height: 1px;
        background: #eee;
    }
    .shop-item-left{
        padding: 0 .24rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .check-box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: .38rem;
            height: .38rem;
            border-radius: 50%;
            border: 1px solid #e1e1e1;
            .check-circle{
                width: .18rem;
                height: .18rem;
                border-radius: 50%;
                background: #FABE00;
            }
        }
    }
}
</style>